<template>
  <div class="m-pro-list">
    <template v-if="typeName">
      <div class="m-pro-tit">
        <div class="m-pro-tit-type">{{typeName}}</div>
        <div class="m-pro-tit-advem">
        </div>
      </div>
    </template>
    <template v-else>
      <mall-product-list-advem></mall-product-list-advem>
    </template>
    <template>
      <div class="mp-pro-list-wrap">
        <mall-product-list-item></mall-product-list-item>
        <mall-product-list-item></mall-product-list-item>
        <mall-product-list-item></mall-product-list-item>
        <mall-product-list-item></mall-product-list-item>
      </div>
    </template>
  </div>
</template>

<script>
import MallProductListAdvem from './mall-product-list-advem'
import MallProductListItem from './mall-product-list-item'

export default {
  name: 'mall-product-list',
  props: {
    typeName: {
      type: [String, Number],
      default: ''
    }
  },
  components: {
    MallProductListItem,
    MallProductListAdvem
  }
}
</script>

<style scoped lang="less">
.m-pro-list{
  margin-top: .16rem;
  background: #fff;
  .m-pro-tit{
    padding: .28rem;
    font-size: .3rem;
    font-weight: 600;
  }
  .m-pro-tit-advem{
    height: 1.54rem;
    background: gray;
    margin-top: .28rem;
  }
}
.mp-pro-list-wrap{
  display: flex;
  flex-wrap: wrap;
  padding: .28rem .28rem 0 .28rem;
}
</style>
